<!-- 商品展示首页 -->
<template>
  <div class="productContainer">
    <div class="card-List">
      <div
        class="card-item"
        v-for="item in listData.slice((curpage - 1) * 10, curpage * 10)"
        :key="item.gid"
      >
        <v-card
          :coverimage="item.coverimage"
          :goodsname="item.goodsname"
          :curprice="item.curprice"
          :preprice="item.preprice"
          :gid="item.gid"
        />
      </div>
    </div>

    <div class="pagination" v-if="total >= 10">
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        @current-change="paginationChange"
        :current-page.sync="curpage"
      />
    </div>
  </div>
</template>

<script>
import cardVue from "./card.vue";
import { getAllGoodsData } from "@/utils/api";
export default {
  components: {
    "v-card": cardVue,
  },
  data() {
    return {
      listData: [
        {
          gid: 1,
          goodname:
            "森马集团旗下棉致棒球服男潮牌宽松ins百搭学生夹克韩版潮流港风春秋痞帅炸街外套国潮男装联名 U-黑色-A43 M",
          goodimage: "https://urlify.cn/fqMrYn",
          curprice: 1000,
          preprice: 2000,
        },
        {
          gid: 2,
          goodname:
            "森马集团旗下棉致棒球服男潮牌宽松ins百搭学生夹克韩版潮流港风春秋痞帅炸街外套国潮男装联名 U-黑色-A43 M",
          goodimage: "https://urlify.cn/fqMrYn",
          curprice: 1000,
          preprice: 2000,
        },
        {
          gid: 3,
          goodname:
            "森马集团旗下棉致棒球服男潮牌宽松ins百搭学生夹克韩版潮流港风春秋痞帅炸街外套国潮男装联名 U-黑色-A43 M",
          goodimage: "https://urlify.cn/fqMrYn",
          curprice: 1000,
          preprice: 2000,
        },
        {
          gid: 4,
          goodname:
            "森马集团旗下棉致棒球服男潮牌宽松ins百搭学生夹克韩版潮流港风春秋痞帅炸街外套国潮男装联名 U-黑色-A43 M",
          goodimage: "https://urlify.cn/fqMrYn",
          curprice: 1000,
          preprice: 2000,
        },
        {
          gid: 5,
          goodname:
            "森马集团旗下棉致棒球服男潮牌宽松ins百搭学生夹克韩版潮流港风春秋痞帅炸街外套国潮男装联名 U-黑色-A43 M",
          goodimage: "https://urlify.cn/fqMrYn",
          curprice: 1000,
          preprice: 2000,
        },
      ],
      curpage: 1,
      total: 0,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData(page) {
      let res = await getAllGoodsData({
        page,
      });
      console.log(res);
      this.listData = res.tableData;
      this.total = res.total;
    },
    paginationChange(page) {
      console.log(page);
      this.currpage = page;
    },
  },
};
</script>

<style lang="less" scoped>
.productContainer {
  .card-List {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
}
</style>